<template>
    <div>
        <div class="container">
            <div class="top">
                <div class="nav">
                    <div>
                        <Logo class="zt" name="校园二手体育用品交易系统" />
                    </div>
                    <div class="route">
                        <span @click="handleRouteSelect('/product')">推荐</span>
                        <span v-if="loginStatus" @click="handleRouteSelect('/myProduct')">我发布的</span>
                        <span v-if="loginStatus" @click="handleRouteSelect('/myView')">我看过的</span>
                        <span v-if="loginStatus" @click="handleRouteSelect('/mySave')">收藏</span>
                    </div>
                </div>
                <div
                    style="cursor: pointer;font-size: 14px;display: flex;justify-content: left;align-items: center;gap: 20px;color: rgb(100, 100, 100);">
                    <div class="word-search">
                        <div class="item">
                            <input type="text" placeholder="搜索商品" v-model="key">
                            <i class="el-icon-search" @click="fetch"></i>
                        </div>
                    </div>
                    <div style="text-align: center;" v-if="loginStatus" @click="handleRouteSelect('/orders')">
                        <div>
                            <i class="el-icon-shopping-cart-full"></i>
                        </div>
                        <div>
                            购物车
                        </div>
                    </div>
                    <div style="text-align: center;" v-if="loginStatus" @click="handleRouteSelect('/message')">
                        <div>
                            <i class="el-icon-bell"></i>
                        </div>
                        <div>
                            通知
                        </div>
                    </div>
                    <div style="text-align: center;" v-if="loginStatus" @click="handleRouteSelect('/post-product')">
                        <div>
                            <i class="el-icon-plus"></i>
                        </div>
                        <div>
                            发布商品
                        </div>
                    </div>
                    <div class="login-btn ">    
                        <div v-if="!loginStatus" @click="loginOperation">登录&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注册</div>
                        <!-- <div v-if="!loginStatus" @click="loginOperation">
                            登录&nbsp;|&nbsp;注册
                        </div> -->
                        <div v-else>
                            <img @click="handleRouteSelect('/myself')" class="avatar" :src="userInfo.userAvatar">
                        </div>
                    </div> 
                </div>
            </div>
            <div class="info" v-if="loginStatus">
                <div>
                    <img :src="userInfo.userAvatar" style="width: 90px;width: 90px;border-radius: 50%;">
                </div>
                <div style="padding: 0 40px;">
                    <div class="title1">
                        <span class="title">{{ userInfo.userName }}</span>
                        <span  class="poin" v-for="(info,index) in productInfoList" :key="index">
                            {{info.name}}·{{ info.count }}
                        </span>
                    </div>
                    <div class="date">
                        上一次登录时间： {{ userInfo.lastLoginTime }}
                    </div>
                    <div class="date">
                        注册于： {{ userInfo.createTime }}
                    </div>
                </div>
            </div>
        </div>
        <div style="padding: 10px 300px;">
            <router-view></router-view>
        </div>
    </div>
</template>
<script>
import Logo from "@/components/Logo";
import { getToken, setUserInfo, setSearchKey } from "@/utils/storage";
export default {
    name: "Home",
    components: {
        Logo,
    },
    data() {
        return {
            selfPath: { name: '个人中心', path: '/mySelf' },
            userRoutes: [],
            key: null,
            dialogOperaion: false,
            loginStatus: false, // 默认未登录
            userInfo: {},
            searchPath: '/search',
            productInfoList: []
        };
    },
    created() {
        this.loadLoginStatus();
        this.handleRouteSelect('/product')
    },
    methods: {
        queryProductInfo() {
            this.$axios.post(`/product/queryProductInfo`, {}).then(res => {
                const { data } = res;
                if (data.code === 200) {
                    this.productInfoList = data.data;
                }
                this.loginStatus = data.code === 200;
            }).catch(error => {
                console.log("商品指标查询异常：", error);
            });
        },
        // 跳转登录页
        loginOperation() {
            this.$router.push('/login');
        },
        // 搜索
        fetch() {
            setSearchKey(this.key);
            this.handleRouteSelect(this.searchPath);
        },
        // 路由切换
        handleRouteSelect(path) {
            if (this.$router.currentRoute.fullPath !== path) {
                this.$router.push(path);
            }
        },
        //判断用户是否已经登录
        loadLoginStatus() {
            const token = getToken();
            // 没登录
            if (token === null) {
                this.loginStatus = false;
                return;
            }
            this.auth();
        },
        // token检验
        auth() {
            this.$axios.get(`/user/auth`).then(res => {
                const { data } = res;
                if (data.code === 200) {
                    // 存储用户信息
                    setUserInfo(data.data);
                    this.userInfo = data.data;
                    this.queryProductInfo();
                }
                this.loginStatus = data.code === 200;
            }).catch(error => {
                console.log("token检验异常：", error);
            });
        },
    }
};
</script>
<style scoped lang="scss">
.avatar {
    border: 3px solid rgb(240, 237, 237);
    width: 50px;
    width: 50px;
    border-radius: 40%;
}

.avatar:hover {
    border: 3px solid rgb(207, 188, 11);
}

.word-search {
    display: flex;
    justify-content: center;

    .item {
        max-width: 210px;
        background-color: rgb(239, 243, 243);
        border-radius: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        border: 1px solid rgb(245, 241, 240);

        input:focus {
            width: 110px;
        }

        input {
            border: none;
            transition: all 0.6s;
            width: 80px;
            margin: 0 10px;
            background-color: rgb(243, 246, 247);
            outline: none;
            font-size: 14px;
        }

        i {
            padding: 6px 12px;
            border-radius: 5px;
            cursor: pointer;
            border-top-right-radius: 20px;
            border-bottom-right-radius: 20px;
            background-color: rgb(20, 210, 235);
        }

        i:hover {
            background-color: rgb(241, 241, 241);
        }
    }

}

.container {
    background-color: rgb(219, 167, 158);
}

.info {
    padding: 5px 50px;
    display: flex;

    img {
        padding: 0px;
        box-sizing: border-box;
        border: 3px solid rgb(255, 255, 255);
    }

    .title1 {
        font-size: 35px;
        color: rgb(17, 16, 16);
        gap: 12px;

        .poin {
            display: inline-block;
            padding: 5px 30px;
            margin-inline: 10px;
            box-sizing: border-box;
            border-radius: 20px;
            cursor: pointer;
            font-size: 15px;
            color: rgb(15, 14, 14);
            background-color: rgb(235, 164, 12);
        }
    }

    .save,
    .date {
        margin: 10px 30px;
        font-size: 15px;
        color: rgb(14, 13, 13);
    }

}

.top {

    height: 80px;
    padding: 5px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .nav {
        padding: 20px 0;
        display: flex;
        justify-content: left;
        align-items: center;
        gap: 20px;

        .route {
            display: flex;
            justify-content: left;
            align-items: center;
            gap: 30px;


            span {
                font-size: 19px;
                color: rgb(8, 8, 8);
                cursor: pointer;
            }

            span:hover {
                color: rgb(255, 255, 255);
            }
        }

    }
    .zt {
        font-size: 35px; /* 根据“4号字”的标准，19px是一个接近的选择 */
        color: rgb(14, 13, 13);
        text-align: center; /* 文本居中 */
        font-family: 'KaiTi', '楷体', sans-serif; /* 设置字体为楷体 */
    }
    
}
</style>